<template>
	<view class="order-list" :class="themeName">

		<!-- Tabs -->
		<u-tabs :list="tabsList" :is-scroll="false" :height="80" :active-color="themeColor" :bar-style="{top: '100%'}"
			:current="tabsIndex" @change="changeCurrentTab" />

		<!-- Order Lists -->
		<block v-for="(tabItem, tabIndex) in tabsList" :key="tabItem['sign']">
			<mescroll-contain v-if="currentTab['sign'] === tabItem['sign']" top="80rpx"
				:ref="'scroll' + '-' + tabItem['sign']" :up-option="{
				  noMoreSize: 3,
				  empty: {
				  	icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
				  	tip: $zhTran('暂无订单~'),
				  	fixed: true
				  }
			  }" @upcallback="upCallback($event, tabItem['sign'])">
				<view class="order-contain">
					<view class="order" v-for="orderItem in tabsList[tabIndex].list" :key="orderItem.id">
						<!-- Order Header -->
						<view class="order-header">

							<!-- S 订单Tag -->
							<template v-if="orderItem.delivery_type === 2">
								<view class="order-tag order-tag--green">{{$zhTran('自提')}}</view>
							</template>
							<!-- E 订单Tag -->

							<!-- 拼团中 -->
							<template v-if="orderItem.status === 0">
								<view class="order-sn">
									<text class="m-r-10">{{$zhTran('距离结束')}}</text>
									<count-down :time-end="orderItem.invalid_time" />
								</view>
							</template>
							<!-- 拼团成功 -->
							<template v-if="orderItem.status === 1">
								<view class="order-sn">{{ orderItem.team_end_time }}</view>
							</template>
							<!-- 拼团失败 -->
							<template v-if="orderItem.status === 2">
								<view class="order-sn">{{ orderItem.team_end_time }}</view>
							</template>

							<!-- 拼团状态 -->
							<view :class="[
									'order-status', 
									`order-status--${orderStatus[orderItem.status]['style']}`
								]">{{ orderStatus[orderItem.status]['name'] }}</view>
						</view>

						<!-- Order Main -->
						<view class="order-main" @tap="goOrderDetail(orderItem.order_id)">
							<!-- Leader -->
							<template v-if="orderItem.identity == 1">
								<view class="leader-icon">{{$zhTran('团长')}}</view>
							</template>
							<!-- Goods -->
							<goods-card shape="rectangle" :image="orderItem.image"
								:contain-style="{ 'border-raius': 0, 'height': '230rpx' }"
								:image-style="{ 'width': '180rpx', 'height': '180rpx' }">
								<view slot="name">
									<u-tag class="m-r-10" :text="orderItem.people_num + $zhTran('人团')" mode="plain"
										size="mini" :color="themeColor" />
									<text>{{ orderItem.name }}</text>
								</view>
								<view class="flex-1 flex-col " slot="default">
									<text class="muted xs m-t-20">{{ orderItem.spec_value_str }}</text>
									<view class="m-t-10 flex row-between">
										<price :content="orderItem.sell_price" mainSize="32rpx" minorSize="24rpx"
											:prefix="price_symbol" />
										<text class="lighter sm">x{{ orderItem.count }}</text>
									</view>
								</view>
							</goods-card>
							<view class="order-desc">
								<text>{{$zhTran('共')}}{{ orderItem.count }}{{$zhTran('件商品,应付款')}}:</text>
								<price class="normal lg" :content="orderItem.order_amount" :prefix="price_symbol" />
							</view>
						</view>

						<!-- Order Footer -->
						<view class="order-footer" v-if="!orderItem.pay_status && orderItem.status === 0">
							<view class="operation operation--primary" @click="handlePayment(orderItem.order_id)">
								{{$zhTran('去付款')}}
							</view>
						</view>
					</view>
				</view>
				<w-jishuzhichi :class="[{'jishuzhichi-nodata':tabsList[tabIndex].list.length == 0}]" />
			</mescroll-contain>
		</block>
	</view>
</template>


<script>
	import {
		apiGoodsTeamHistory
	} from '@/api/goods'
	import {
		PaymentStatusEnum
	} from '@/utils/enum'

	const TabsFormEnum = {
		NORMAL: '', // 全部
		DOING: 0, // 拼团中
		SUCCESS: 1, // 拼团成功
		FAIL: 2, // 拼团失败
	}

	export default {
		name: 'GoodsTeamHistory',

		data() {
			return {
				// Tabs列表
				tabsList: [{
					sign: 'NORMAL',
					name: this.$zhTran('全部'),
					list: [],
				}, {
					sign: 'DOING',
					name: this.$zhTran('拼团中'),
					list: [],
				}, {
					sign: 'SUCCESS',
					name: this.$zhTran('拼团成功'),
					list: [],
				}, {
					sign: 'FAIL',
					name: this.$zhTran('拼团失败'),
					list: [],
				}],
				tabsIndex: 0, // Tabs索引

				// 订单状态
				orderStatus: {
					0: {
						name: this.$zhTran('拼团中'),
						style: 'primary',
					},
					1: {
						name: this.$zhTran('拼团成功'),
						style: 'primary',
					},
					2: {
						name: this.$zhTran('拼团失败'),
						style: 'muted',
					},
				},
				price_symbol: '￥'
			}
		},

		computed: {
			// 当前Tab项
			currentTab() {
				return this.tabsList[this.tabsIndex]
			},

			// 映射Tabs项
			mapTabsItem() {
				return sign => this.tabsList.find(item => item['sign'] === sign)
			}
		},

		methods: {
			// 更改当前Tab页
			changeCurrentTab(index) {
				this.tabsIndex = index
			},

			// 上拉加载更多
			upCallback({
				num,
				size
			}, sign) {
				const ref = this.$refs['scroll' + '-' + sign][0]

				apiGoodsTeamHistory({
					status: TabsFormEnum[sign],
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					page_size,
					count,
					extend
				}) => {
					const tab = this.mapTabsItem(sign)
					if (num === 1) tab.list = []
					tab.list = [...tab.list, ...lists]
					tab.list = this.$zhTran(tab.list)
					ref.endSuccess(lists.length, count)
					this.price_symbol = extend.price_symbol
				}).catch(err => {
					ref.endBySize()
				})
			},

			// 去订单详情
			goOrderDetail(id) {
				this.$Router.push({
					path: '/bundle2/pages/order_detail/order_detail',
					query: {
						order_id: id
					}
				})
			},

			// 处理：支付
			handlePayment(orderID) {
				this.$Router.push({
					path: `/bundle2/pages/payment/payment`,
					query: {
						from: 'order',
						order_id: orderID
					}
				})
			},
		},

		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
			// 监听全局duringPayment事件
			uni.$on('duringPayment', ({
				result
			}) => {

				if (result === PaymentStatusEnum['SUCCESS']) {
					this.$Router.back()
					setTimeout(() => {
						this.$toast({
							title: this.$zhTran('支付成功')
						})
						const sign = this.currentTab['sign']
						const ref = this.$refs['scroll' + '-' + sign][0]
						ref.downCallback()
					}, 0.5 * 1000)
				}
			})
		},

		onUnload() {
			uni.$off('duringPayment')
		},
	}
</script>


<style lang="scss" scoped>
	.order-contain {
		padding: 0 20rpx;
	}

	.order {
		padding-left: 20rpx;
		margin-top: 20rpx;
		border-radius: 5px;
		background-color: #FFFFFF;

		&-header {
			display: flex;
			height: 80rpx;
			align-items: center;
			padding-right: 20rpx;
			border-bottom: $-solid-border;

			.order-sn {
				font-size: $-font-size-nr;
			}

			.order-status {
				margin-left: auto;
				font-size: $-font-size-sm;

				&--primary {
					@include font_color()
				}

				&--muted {
					color: $-color-muted;
				}
			}
		}

		&-main {
			position: relative;

			.leader-icon {
				position: absolute;
				top: 20rpx;
				left: -20rpx;
				z-index: 9;
				padding: 4rpx 20rpx;
				border-radius: 0 60px 60px 0;
				font-size: $-font-size-xs;
				@include background_linear();
				color: #FFFFFF;
			}

			.order-desc {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 20rpx;
				font-size: $-font-size-xs;
				color: $-color-muted;
			}
		}

		&-footer {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100rpx;
			padding-right: 20rpx;
			border-top: $-solid-border;

			.operation {
				box-sizing: border-box;
				padding: 10rpx 30rpx;
				border-radius: 60px;
				font-size: $-font-size-nr;

				&--primary {
					@include background_color() color: #FFFFFF;
				}
			}
		}

	}
</style>